<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <!-- 引入bootstrap相关资源 -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
          integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
          crossorigin="anonymous"/>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
            crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.5.0/font/bootstrap-icons.css">
    <!-- 引入axios -->
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <!-- 引入本页面需要的css -->
    <link rel="stylesheet" href="../public/css/detail.css"/>
</head>
<body>
<!-- 顶部导航栏 0 -->
<nav id="navbar" class="navbar navbar-light bg-light px-3">
    <a class="navbar-brand" href="./index.html">Blog</a>
    <ul class="nav nav-pills">
        <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#">
                <i class="bi bi-list"></i>
            </a>
            <ul class="dropdown-menu">
                {{if !isLogin}}
                <!-- 如果未登录则显示下面的列表项 -->
                <li class="login-show-item"><a class="dropdown-item" href="./login.html">登录</a></li>
                <li class="login-show-item"><a class="dropdown-item" href="./register.html">注册</a></li>
                {{else}}
                <!-- 如果已登录，则显示下面的列表项 -->
                <li class="not-login-show-item"><a class="dropdown-item" href="./index.html">个人主页</a></li>
                <li class="not-login-show-item">
                    <hr class="dropdown-divider">
                </li>
                <li class="not-login-show-item"><a class="dropdown-item" href="./publish.html">发表话题</a></li>
                <li class="not-login-show-item"><a class="dropdown-item" href="/logout">登出</a></li>
                {{/if}}
            </ul>
        </li>
    </ul>
</nav>
<!-- 顶部导航栏 1 -->
<!-- 中间内容 0 -->
<div class="container detail-panel">
    <!-- 每一项 0 -->
    <div class="row justify-content-md-center">
        <!-- 发言人头像 -->
        <div class="col-sm-2">
            <a href="./index.html?author={{note.userId}}">
                <img src="{{user.avatar}}" class="img-thumbnail avatar" alt="头像" data-bs-toggle="tooltip"
                     data-bs-placement="bottom" title="{{user.username}} | {{user.gender}}"/>
            </a>
        </div>
        <!-- 发言人发布的内容面板 -->
        <div class="col-sm-10">
            <div class="card">
                <div class="card-body">
                    <div class="container">
                        <!-- 帖子id -->
                        <input type="text" id="noteId" name="noteId" value="{{note.id}}" hidden>
                        <!-- 标题 -->
                        <div class="row">
                            <h5 class="card-title">
                                <a href="./detail.html?id={{note.id}}">{{note.title}}</a>
                            </h5>
                        </div>
                        <!-- 具体内容 -->
                        <div class="row card-content">
                            <p class="card-text">{{note.content}}</p>
                        </div>
                        <!-- 其他 -->
                        <div class="row">
                            <!-- 发布日期 -->
                            <div class="col-sm-4">
                                <p class="text-start"><span>{{note.insertDate}}</span></p>
                            </div>
                            <div class="col-sm-5"></div>
                            <div class="col-sm-3">
                                <!-- 浏览次数 -->
                                <span class="view">浏览({{note.viewCount}})</span>
                                <!-- 留言数 -->
                                <span class="say">留言({{comment.commentCount}})</span>
                                <!-- 下面的判断要求只有当用户登录并且当前帖子的用户id和已登录用户id相同时才具有编辑和删除的权限，否则不显示 -->
                                {{if isLogin&&user.id===(loginUserId!=null?loginUserId:null)}}
                                <!-- 删除和编辑操作 -->
                                <ul class="nav nav-pills edit">
                                    <li class="nav-item dropdown">
                                        <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#"></a>
                                        <ul class="dropdown-menu">
                                            <!-- 如果未登录则显示下面的列表项 -->
                                            <li>
                                                <a class="dropdown-item" href="./publish.html?id={{note.id}}">编辑</a>
                                            </li>
                                            <li>
                                                <a class="dropdown-item" href="/note/delete?id={{note.id}}">删除</a>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                                {{/if}}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 每一项 1 -->
    <!-- 留言面板 0 -->
    <div class="row justify-content-md-center message-panel">
        <div class="col-sm-2"></div>
        <div class="col-sm-10">
            <div class="card">
                <div class="card-header">
                    <b>留言</b>
                </div>
                <div class="card-body">
                    <div>
                        {{each comments}}
                        <!-- 每一条留言 -->
                        <div class="row message-item">
                            <div class="col-sm-2">
                                <img src="{{$value.user.avatar}}" class="img-thumbnail" alt="头像"/>
                            </div>
                            <div class="col-sm-10">
                                <p>
                                    <span><a
                                            href="/index.html?author={{$value.user.id}}">{{$value.user.username}}</a></span>
                                    <span class="publish-date">{{$value.comment.insertDate}}</span>
                                </p>
                                <p>{{$value.comment.content}}</p>
                            </div>
                        </div>
                        {{/each}}
                        {{if isLogin}}
                        <!-- 发表留言面板（注意，需要用户登录后才能发表留言，所以下面的页面需要登录才显示） -->
                        <div class="row" id="publish-message-panel">
                            <textarea class="form-control" cols="5" rows="5" placeholder="登录后才能留言..."
                                      id="comment"></textarea>
                            <button type="button" class="btn btn-primary publish-message-button" id="comment-button">
                                留言
                            </button>
                        </div>
                        {{/if}}
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 留言面板 1 -->
</div>
<!-- 中间内容 1 -->
</body>
<script>
    // 为了能够使用tooltip, 需要引入下面的JavaScript代码
    var tooltipTriggerList = Array.prototype.slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]'));
    var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
        return new bootstrap.Tooltip(tooltipTriggerEl)
    });
    // 为了能够使用popover, 需要引入下面的JavaScript代码
    var popoverTriggerList = Array.prototype.slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'));
    var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
        return new bootstrap.Popover(popoverTriggerEl)
    });

    // 发布留言按钮事件
    if (document.getElementById('comment-button') !== null) {
        document.getElementById('comment-button').onclick = function () {
            var comment = document.getElementById('comment').value;// 留言内容
            var noteId = document.getElementById('noteId').value;// 被留言的帖子id
            axios.post('/comment/publish', {content: comment, noteId: noteId}).then(function (response) {
                // 在提交留言后刷新当前页面
                document.getElementById('comment').value=null;
                window.location.reload();
            }).catch(function (reason) {
                console.log(reason);
            });
        }
    }
</script>
</html>
